<div [hidden]="!authenticated" style="text-align:center">
    <h1>
        Welcome to {{ title }} !
    </h1>
    <button (click)="getOrder()" type="button" class="btn btn-primary">Get Order Info</button>
    <p>order id : {{ order.id }}</p>
    <p>order product id : {{ order.productId }}</p>
    <button (click)="logout()" type="button" class="btn btn-primary">Logout</button>
</div>

<div [hidden]="authenticated">
    <p>please login</p>
    <form role="form" (submit)="login()">
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" class="form-control" id="username" name="username" 
            [(ngModel)]="credentials.username" />
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" class="form-control" id="password" name="password" 
            [(ngModel)]="credentials.password" />
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>